<template>
  <div class="page-container-padding page-view">
    <div>
      <el-table
        border
        stripe
        empty-text="恭喜！您没有工作失误."
        :data="mistakeList"
      >
        <el-table-column
          prop="mistake_date"
          label="日期"
          width="100"
          show-overflow-text
        />
        <el-table-column
          prop="mistake_type_name"
          label="失误类型"
          width="100"
          show-overflow-text
        />
        <el-table-column
          prop="discovery_name"
          label="发现人员"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column
          prop="mistake_desc"
          label="失误描述"
          show-overflow-text
        />
      </el-table>
      <el-pagination
        hide-on-single-page
        layout="prev, pager, next, jumper"
        style="margin-top: 10px"
        :current-page.sync="paginator.page"
        :page-size="paginator.pageSize"
        :total="paginator.totalCount"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  import { GetMyWorkMistake } from '@/api/departmentWork/mistake'
  export default {
    data() {
      return {
        mistakeList: [],
        paginator: {
          page: 1,
          pageSize: 30,
          totalCount: 0,
        },
      }
    },
    mounted() {
      this.queryMistakes()
    },
    methods: {
      queryMistakes() {
        GetMyWorkMistake(this.paginator.page, this.paginator.pageSize).then(
          (res) => {
            this.mistakeList = res.data.data
            this.paginator.totalCount = res.data.total_count
          }
        )
      },
      handleCurrentChange(p) {
        this.paginator.page = p
        this.queryMistakes()
      },
    },
  }
</script>

<style scoped lang="scss">
  .page-view {
    background-color: #fff;
  }
</style>
